<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
        <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
      <style>
      body{margin: 0;background-color: #fff}
      #header { background: #fff; height:50px;background-color: #fc6d4d}
        #header *{color: #fff}

      header {
          width: 100%;
          height: 50px;
      }

      header .back {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 50px;
          height: 50px;
          background-position: 16px center;;
          background-size:16px 16px;
          background-repeat: no-repeat;
          background-image: url(../../image/return.svg);
      }

      header h1 {
          width: 100%;
          height: 50px;
          line-height: 50px;
          text-align: center;
          color: #333;
          font-size: 20px;
      }

                #sx nav {
                        float: left;
                        display: -webkit-box;
                        display: -webkit-flex;
                        display: flex;
                        -webkit-box-orient: horizontal;
                        -webkit-flex-flow: row;
                        flex-flow: row;
                        position: relative;
                        width: 100%;
                        height: 50px;margin-top: 0;
                    }

                    #sx  nav .abc {
                          -webkit-box-flex: 1;
                          -webkit-flex: 1;
                          flex: 1;
                          width: 100%;
                          height: 40px;
                          line-height: 40px;
                          font-size: 14px;
                          color: #333;
                          text-align: center;
                          border:1px solid #F5F5F5
                      }
                      #sx  nav .abc:first-child+.abc {
                          border-left: 0
                        }
                  #sx  nav .abc.selected {
                        font-size: 14px;
                        color: #000;
                        font-weight: bolder;
                    }
                    #type nav {
                            float: left;
                            display: -webkit-box;
                            display: -webkit-flex;
                            display: flex;
                            -webkit-box-orient: horizontal;
                            -webkit-flex-flow: row;
                            flex-flow: row;
                            position: relative;
                            width: 100%;
                            height: 50px;margin-top:0;
                            background-color: #F8F8FA;
                        }

                        #type  nav .abc {
                          border: 1px solid #fff;
                          border-right: none;
                              -webkit-box-flex: 1;
                              -webkit-flex: 1;
                              flex: 1;
                              width: 100%;
                              height: 50px;
                              line-height: 50px;
                              font-size: 14px;
                              color: #333;
                              text-align: center;
                              border:1px solid #F5F5F5
                          }
                            #type  nav .abc:first-child{border-left: none}
                              #type  nav .abc:first-child+.abc+.abc{border-right: none}
                          #type  nav .abc:first-child+.abc {
                              border-left: 0
                            }
                      #type  nav .abc.selected {
                            font-size: 14px;
                            color: #fc6d4d!important;
                            font-weight: bolder;
                            border-bottom: 1px solid  #fc6d4d!important;box-sizing: border-box;

                        }
#sx{display: none;}
      </style>
  </head>
  <body>
    <header class="aui-bar aui-bar-nav" id="header">
        <a class="aui-btn aui-pull-left" tapmode onclick="api.closeWin()">
            <span class="aui-iconfont aui-icon-left" style="font-size:14px;"></span>
        </a>
        <div class="aui-title" id="title" style="font-size:14px;">需求中心</div>
    </header>
    <div id="type">
      <nav id="nava">
          <div class="abc selected" tapmode onclick="abc(0)" >拖车</div>
          <div class="abc" tapmode onclick="abc(1)">加油</div>
          <div class="abc" id="weixiu"  tapmode onclick="abc(2)" >维修</div>
      </nav>
    </div>
        <div id="sx">
          <nav >
              <div class="abc" tapmode onclick="dq()" id="xzdq">地区</div>
              <div class="abc" tapmode onclick="jl()" id="xzjl">距离</div>
          </nav>
        </div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript">
      apiready = function(){
                var header = $api.byId('header');
              headerH =  $api.fixStatusBar(header);
api.openFrameGroup ({
    name: 'xmzx_grp',
    background: '#fff',
    scrollEnabled: false,
    rect: {
         x: 0,
         y: headerH+100,
         w: 'auto',
         h:'auto',
    },
    index: 0,
    frames: [{
        name: 'tuoche',
        url: 'list_xqzx_tuoche.html',
        bgColor: '#fff'
    },{
        name: 'jiayou',
        url: 'list_xqzx_jiayou.html',
        bgColor: '#fff'
    },{
        name: 'weixiu',
        url: 'list_xqzx_weixiu.html',
        bgColor: '#fff'
    }
  ]
}, function(ret, err){
    if( ret ){
      var index = ret.index;
      if(index==0){
        api.setFrameGroupAttr({
            name: 'xmzx_grp',
            rect:{
               y: headerH+50
            }
        });
        $api.css($api.byId('sx'),'display:none')
      }else if(index==1){
        $api.css($api.byId('sx'),'display:none')
        api.setFrameGroupAttr({
            name: 'xmzx_grp',
            rect:{
               y: headerH+50
            }

        });
      }else if(index==2){
        $api.css($api.byId('sx'),'display:block')
        api.setFrameGroupAttr({
            name: 'xmzx_grp',
            rect:{
               y: headerH+100
            }
        });
      }
    }else{

    }
});

    //    $api.text($api.byId("title"),api.pageParam.name);



      //三个窗口

      //筛选
  //    saixuan();
      };
         var headerH;
         var sxobj;
         var diqu="";
         var juli=""



function dq(){
  api.actionSheet({
      buttons:  ['全济南',"历下区", "市中区", "天桥区", "历城区", "槐荫区", "长清区", "章丘区", "济阳区", "莱芜区", "钢城区", "高新区"]
  }, function(ret, err){
      if( ret ){
                if(ret.buttonIndex==1){
                    diqu = "";
                    $api.text($api.byId('xzdq'), '全济南');
                  }else if(ret.buttonIndex==2){
                    diqu ="历下区";
                    $api.text($api.byId('xzdq'), '历下区');
                  }else if(ret.buttonIndex==3){
                    diqu ="市中区";
                    $api.text($api.byId('xzdq'), '市中区');
                  }else if(ret.buttonIndex==4){
                    diqu ="天桥区";
                    $api.text($api.byId('xzdq'), '天桥区');
                  }else if(ret.buttonIndex==5){
                    diqu ="历城区";
                    $api.text($api.byId('xzdq'), '历城区');
                  }else if(ret.buttonIndex==6){
                    diqu ="槐荫区";
                    $api.text($api.byId('xzdq'), '槐荫区');
                  }else if(ret.buttonIndex==7){
                    diqu ="长清区";
                    $api.text($api.byId('xzdq'), '长清区');
                  }else if(ret.buttonIndex==8){
                    diqu ="章丘区";
                    $api.text($api.byId('xzdq'), '章丘区');
                  }else if(ret.buttonIndex==9){
                    diqu ="济阳区";
                    $api.text($api.byId('xzdq'), '济阳区');
                  }else if(ret.buttonIndex==10){
                    diqu ="莱芜区";
                    $api.text($api.byId('xzdq'), '莱芜区');
                  }else if(ret.buttonIndex==11){
                    diqu ="钢城区";
                    $api.text($api.byId('xzdq'), '钢城区');
                  }else if(ret.buttonIndex==12){
                    diqu ="高新区";
                    $api.text($api.byId('xzdq'), '高新区');
                  }
                  api.sendEvent({
                    name: 'xqzxsx',
                    extra: {
                        diqu: diqu,
                        juli:juli
                    }
                  });
      }else{
      }
  });
}


function jl(){
  api.actionSheet({
      buttons: ['不限',"由远至近", "由近至远"]
  }, function(ret, err){
      if( ret ){
        if(ret.buttonIndex==1){
                  juli=""
                  $api.text($api.byId('xzjl'), '不限');
                }else if(ret.buttonIndex==2){
                  juli ="由远至近";
                    $api.text($api.byId('xzjl'), '由远至近');
                }else if(ret.buttonIndex==3){
                  juli = "由近至远";
                    $api.text($api.byId('xzjl'), '由近至远');
                }
                api.sendEvent({
                  name: 'xqzxsx',
                  extra: {
                      diqu: diqu,
                      juli:juli
                  }
                });
      }else{
          // console.log( JSON.stringify( err ) );
      }
  });

}


function opsearch() {
  api.openWin({
      name: 'search',
      url: 'widget://html/search/search.html',
      slidBackEnabled:true,
      pageParam: {
          name: 'test'
      }
  });
}
var abclen=$api.domAll($api.byId("nava"), ".abc");
function abc(data) {

  for ( i=0; i<abclen.length; i++) {



if(data==2){
  $api.css($api.byId('sx'),'display:block');
}    else{
  $api.css($api.byId('sx'),'display:none');
}
if(data==i){

$api.addCls(abclen[i], 'selected');

}else{
  $api.removeCls(abclen[i], 'selected');

}

    }

    api.setFrameGroupIndex({
        name: 'xmzx_grp',
        index: data,
    });

  }


  </script>
  </html>
